<!--  -->
<template>
  <div class='authority'>
    <el-button v-permissions="'tah:add'" type="primary" @click="addEatTagNow" style="margin-bottom: 10px;">新增</el-button>
    <!-- 查询 -->
    <el-form :inline="true" :model="FindFromForTah" class="demo-form-inline">
      <el-form-item label="关键字查询">
        <el-input v-model="FindFromForTah.kw" placeholder="请输入耳标"></el-input>
      </el-form-item>
      <el-form-item label="牧场">
        <el-select v-model="FindFromForTah.ranchId" placeholder="请选择牧场" @change="changeRanchGetPen">
          <el-option
            v-for="(item,index) in FindFromForTah.ranchIdArr"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="圈棚">
        <el-select v-model="FindFromForTah.penId" placeholder="请选择圈棚" @change="changePenGetSty">
          <el-option
            v-for="(item,index) in FindFromForTah.penIdArr"
            :key="index"
            :label="item.penName"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏舍">
        <el-select v-model="FindFromForTah.styId" placeholder="请选择栏舍">
          <el-option
            v-for="(item,index) in FindFromForTah.styIdArr"
            :key="index"
            :label="item.styName"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSrearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <!-- 列表展示选择 -->
      <el-form :inline="true">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(item,index) in isShowList" v-model="item.isShow" :label="item.label" :key="index">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <!-- 列表展示 -->
      <el-table
        :data="getTahListForView"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="55">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="名称"
          width="55">
        </el-table-column>
        <el-table-column
          prop="collectionInterval"
          label="间隔单位/s"
          v-if="checkList.indexOf('间隔单位/s') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="enableHumLowerAlarm"
          label="湿度下限告警"
          v-if="checkList.indexOf('湿度下限告警') != -1"
          width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.enableHumLowerAlarm === 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableHumUpperAlarm"
          label="湿度上限告警"
          v-if="checkList.indexOf('湿度上限告警') != -1"
          width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.enableHumUpperAlarm === 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableQuantityAlarm"
          label="电量不足告警"
          v-if="checkList.indexOf('电量不足告警') != -1"
          width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.enableQuantityAlarm === 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableTmpLowerAlarm"
          label="温度下限告警"
          v-if="checkList.indexOf('温度下限告警') != -1"
          width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.enableTmpLowerAlarm === 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableTmpUpperAlarm"
          label="温度上限告警"
          v-if="checkList.indexOf('温度上限告警') != -1"
          width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.enableTmpUpperAlarm === 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="humLowerLimit"
          label="湿警下限"
          v-if="checkList.indexOf('湿警下限') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="humUpperLimit"
          label="湿警上限"
          v-if="checkList.indexOf('湿警上限') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="id"
          label="设备id"
          v-if="checkList.indexOf('设备id') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="设备名称"
          v-if="checkList.indexOf('设备名称') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="overCollectionInterval"
          label="超温采集间隔/s"
          v-if="checkList.indexOf('超温采集间隔/s') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="overUploadInterval"
          label="超温上报间隔/s"
          v-if="checkList.indexOf('超温上报间隔/s') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="quantityLimit"
          label="电量告警阈值"
          v-if="checkList.indexOf('电量告警阈值') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="ranchName"
          label="牧场名称"
          v-if="checkList.indexOf('牧场名称') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="penName"
          label="圈棚名称"
          v-if="checkList.indexOf('圈棚名称') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="styName"
          label="栏舍名称"
          v-if="checkList.indexOf('栏舍名称') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="tmpLowerLimit"
          label="报警下限温度"
          v-if="checkList.indexOf('报警下限温度') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="tmpUpperLimit"
          label="报警上限温度"
          v-if="checkList.indexOf('报警上限温度') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          prop="uploadInterval"
          label="上传间隔/s"
          v-if="checkList.indexOf('上传间隔/s') != -1"
          width="80">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          >
          <template slot-scope="scope">
            <el-button v-permissions="'tah:detail'" @click="getLiveStockDetail(scope.row.id)" type="text" size="small">详情</el-button>
            <el-button v-permissions="'tah:delete'" @click="deletLiveStockDUser(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 详情 -->
      <el-dialog
        title="温度湿度详情"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        width="50%">
        <el-form
          ref="deatilsFrom"
          :model="updateTahDetail"
          :disabled="isDisabled"
          :inline="false"
          class="demo-form-inline"
          label-position="left"
          label-width="auto"
          :rules="updateTahRules">
          <div class="filter-container">
            <el-form-item label="间隔单位/s" prop="collectionInterval">
              <el-input v-model="updateTahDetail.collectionInterval"></el-input>
            </el-form-item>
            <el-form-item label="湿度下限告警" prop="enableHumLowerAlarm">
              <el-select v-model="updateTahDetail.enableHumLowerAlarm" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.enableHumLowerAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="湿度上限告警" prop="enableHumUpperAlarm">
              <el-select v-model="updateTahDetail.enableHumUpperAlarm" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.enableHumUpperAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电量不足告警" prop="enableQuantityAlarm">
              <el-select v-model="updateTahDetail.enableQuantityAlarm" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.enableQuantityAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="温度下限告警" prop="enableTmpLowerAlarm">
              <el-select v-model="updateTahDetail.enableTmpLowerAlarm" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.enableTmpLowerAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="温度上限告警" prop="enableTmpUpperAlarm">
              <el-select v-model="updateTahDetail.enableTmpUpperAlarm" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.enableTmpUpperAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="湿警下限" prop="humLowerLimit">
              <el-input v-model="updateTahDetail.humLowerLimit"></el-input>
            </el-form-item>
            <el-form-item label="湿警上限" prop="humUpperLimit">
              <el-input v-model="updateTahDetail.humUpperLimit"></el-input>
            </el-form-item>
            <el-form-item label="设备id" prop="id">
              <el-input :disabled="true" v-model="updateTahDetail.id"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="nickName">
              <el-input v-model="updateTahDetail.nickName"></el-input>
            </el-form-item>
            <el-form-item label="超温采集间隔/s" prop="overCollectionInterval">
              <el-input v-model="updateTahDetail.overCollectionInterval"></el-input>
            </el-form-item>
            <el-form-item label="超温上报间隔/s" prop="overUploadInterval">
              <el-input v-model="updateTahDetail.overUploadInterval"></el-input>
            </el-form-item>
            <el-form-item label="牧场名称" prop="ranchId">
              <el-select v-model="updateTahDetail.ranchId" @change="changeDetailRanchBePen" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.ranchIdArr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="圈棚名称" prop="penId">
              <el-select v-model="updateTahDetail.penId" @change="changeDetailPenBeSty" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.penIdArr"
                  :key="index"
                  :label="item.penName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="栏舍名称" prop="penId">
              <el-select v-model="updateTahDetail.styId" placeholder="请选择">
                <el-option
                  v-for="(item,index) in updateTahDetail.styIdArr"
                  :key="index"
                  :label="item.styName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报警下限温度" prop="tmpLowerLimit">
              <el-input v-model="updateTahDetail.tmpLowerLimit"></el-input>
            </el-form-item>
            <el-form-item label="报警上限温度" prop="tmpUpperLimit">
              <el-input v-model="updateTahDetail.tmpUpperLimit"></el-input>
            </el-form-item>
            <el-form-item label="上传间隔/s" prop="uploadInterval">
              <el-input v-model="updateTahDetail.uploadInterval"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="buttons">
           <el-button v-permissions="'tah:update'" type="primary" @click="setConfigUserRole" v-if="isDisabled">修改</el-button>
           <el-button type="primary" @click="submitConfigUser" v-if="!isDisabled">保存</el-button>
           <el-button @click="closeDiaDetail">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog
        title="新增温度湿度"
        :visible.sync="addTahListData"
        :close-on-press-escape="true"
        :close-on-click-modal="false"
        @close="closeDia"
        width="50%">
        <el-form ref="formName" :model="formForAddTah" :rules="addEarTagRule" label-width="120px">
          <el-form-item label="间隔单位/s" prop="collectionInterval">
            <el-input v-model="formForAddTah.collectionInterval"></el-input>
          </el-form-item>
          <el-form-item label="湿度下限告警" prop="enableHumLowerAlarmVal">
              <el-select v-model="formForAddTah.enableHumLowerAlarmVal" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.enableHumLowerAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="湿度上限告警" prop="enableHumUpperAlarmVal">
              <el-select v-model="formForAddTah.enableHumUpperAlarmVal" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.enableHumUpperAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="电量不足告警" prop="enableQuantityAlarmVal">
              <el-select v-model="formForAddTah.enableQuantityAlarmVal" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.enableQuantityAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度下限告警" prop="enableTmpLowerAlarmVal">
              <el-select v-model="formForAddTah.enableTmpLowerAlarmVal" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.enableTmpLowerAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度上限告警" prop="enableTmpUpperAlarmVal">
              <el-select v-model="formForAddTah.enableTmpUpperAlarmVal" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.enableTmpUpperAlarmArr"
                  :key="index"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="湿警下限" prop="humLowerLimit">
            <el-input v-model="formForAddTah.humLowerLimit"></el-input>
          </el-form-item>
          <el-form-item label="湿警上限" prop="humUpperLimit">
            <el-input v-model="formForAddTah.humUpperLimit"></el-input>
          </el-form-item>
          <el-form-item label="设备id" prop="id">
            <el-input v-model="formForAddTah.id"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="nickName">
            <el-input v-model="formForAddTah.nickName"></el-input>
          </el-form-item>
          <el-form-item label="超温采集间隔/s" prop="overCollectionInterval">
            <el-input v-model="formForAddTah.overCollectionInterval"></el-input>
          </el-form-item>
          <el-form-item label="超温上报间隔/s" prop="overUploadInterval">
            <el-input v-model="formForAddTah.overUploadInterval"></el-input>
          </el-form-item>
          <el-form-item label="电量告警阈值" prop="quantityLimit">
            <el-input v-model="formForAddTah.quantityLimit"></el-input>
          </el-form-item>
          <el-form-item label="牧场" prop="ranchId">
              <el-select v-model="formForAddTah.ranchId" @change="changeRanchForAdd" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.ranchIdArr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="圈棚" prop="penId">
              <el-select v-model="formForAddTah.penId" @change="changePenForAdd" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.penIdArr"
                  :key="index"
                  :label="item.penName"
                  :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="栏舍" prop="styId">
              <el-select v-model="formForAddTah.styId" placeholder="请选择">
                <el-option
                  v-for="(item,index) in formForAddTah.styIdArr"
                  :key="index"
                  :label="item.styName"
                  :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="报警下限温度" prop="tmpLowerLimit">
            <el-input v-model="formForAddTah.tmpLowerLimit"></el-input>
          </el-form-item>
          <el-form-item label="报警上限温度" prop="tmpUpperLimit">
            <el-input v-model="formForAddTah.tmpUpperLimit"></el-input>
          </el-form-item>
          <el-form-item label="上传间隔/s" prop="uploadInterval">
            <el-input v-model="formForAddTah.uploadInterval"></el-input>
          </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: center;">
          <el-button type="primary" @click="commitTah">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <pagination
      class="pagination_container"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      :page.sync="pagination.page"
      :limit.sync="pagination.pageSize"
      @pagination="getTahList"
    />
  </div>
</template>

<script>
import { ranchRanchList } from '@/api/ranch'
import { penPenList } from '@/api/pen'
import { styStyList } from '@/api/sty'
import { tahDeviceAdd, tahDeviceList, styDetail, tahDeviceUpdate, tahDeviceDelete } from '@/api/tahDevice'
import Pagination from '@/components/pagination'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Pagination
  },
  data () {
    // 这里存放数据
    return {
      checkAll: [],
      isIndeterminate: true,
      checkList: ['设备id', '报警上限温度', '报警下限温度', '湿警下限', '湿警上限', '湿度上限告警', '牧场名称', '圈棚名称', '栏舍名称'],
      isShowList: [
        {
          isShow: false,
          label: '间隔单位/s'
        },
        {
          isShow: false,
          label: '湿度下限告警'
        },
        {
          isShow: false,
          label: '湿度上限告警'
        },
        {
          isShow: false,
          label: '电量不足告警'
        },
        {
          isShow: false,
          label: '温度下限告警'
        },
        {
          isShow: false,
          label: '温度上限告警'
        },
        {
          isShow: false,
          label: '湿警下限'
        },
        {
          isShow: false,
          label: '湿警上限'
        },
        {
          isShow: false,
          label: '设备id'
        },
        {
          isShow: false,
          label: '设备名称'
        },
        {
          isShow: false,
          label: '超温采集间隔/s'
        },
        {
          isShow: false,
          label: '超温上报间隔/s'
        },
        {
          isShow: false,
          label: '电量告警阈值'
        },
        {
          isShow: false,
          label: '牧场名称'
        },
        {
          isShow: false,
          label: '圈棚名称'
        },
        {
          isShow: false,
          label: '栏舍名称'
        },
        {
          isShow: false,
          label: '报警下限温度'
        },
        {
          isShow: false,
          label: '报警上限温度'
        },
        {
          isShow: false,
          label: '上传间隔/s'
        }
      ],
      // 新增 温度湿度设备
      formForAddTah: {
        collectionInterval: '',
        enableHumLowerAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableHumLowerAlarmVal: '',
        enableHumUpperAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableHumUpperAlarmVal: '',
        enableQuantityAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableQuantityAlarmVal: '',
        enableTmpLowerAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableTmpLowerAlarmVal: '',
        enableTmpUpperAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableTmpUpperAlarmVal: '',
        humLowerLimit: '', // 湿警下限温度
        humUpperLimit: '',
        id: '',
        nickName: '',
        overCollectionInterval: '',
        overUploadInterval: '',
        quantityLimit: '',
        ranchId: '',
        ranchIdArr: [],
        penId: '',
        penIdArr: [],
        styId: '',
        styIdArr: [],
        tmpLowerLimit: '',
        tmpUpperLimit: '',
        uploadInterval: ''
      },
      // 新增 温度湿度设备 rule 验证
      addEarTagRule: {
        collectionInterval: [
          { required: true, trigger: 'blur', message: '请输入间隔单位' }
        ],
        enableHumLowerAlarmVal: [
          { required: true, trigger: 'change', message: '请选择湿度下限告警' }
        ],
        enableHumUpperAlarmVal: [
          { required: true, trigger: 'change', message: '请选择湿度上限告警' }
        ],
        enableQuantityAlarmVal: [
          { required: true, trigger: 'change', message: '请选择电量不足告警' }
        ],
        enableTmpLowerAlarmVal: [
          { required: true, trigger: 'change', message: '请选择温度下限告警' }
        ],
        enableTmpUpperAlarmVal: [
          { required: true, trigger: 'change', message: '请选择温度上限告警' }
        ],
        humLowerLimit: [
          { required: true, trigger: 'blur', message: '请输入湿警' }
        ],
        humUpperLimit: [
          { required: true, trigger: 'blur', message: '请输入湿警' }
        ],
        id: [
          { required: true, trigger: 'blur', message: '请输入设备id' }
        ],
        nickName: [
          { required: true, trigger: 'blur', message: '请输入设备名称' }
        ],
        overCollectionInterval: [
          { required: true, trigger: 'blur', message: '请输入超温采集间隔' }
        ],
        overUploadInterval: [
          { required: true, trigger: 'blur', message: '请输入超温上报间隔' }
        ],
        quantityLimit: [
          { required: true, trigger: 'blur', message: '请输入电量告警阈值' }
        ],
        ranchId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        penId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        styId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ],
        tmpLowerLimit: [
          { required: true, trigger: 'blur', message: '请输入报警下限温度' }
        ],
        tmpUpperLimit: [
          { required: true, trigger: 'blur', message: '请输入报警上限温度' }
        ],
        uploadInterval: [
          { required: true, trigger: 'blur', message: '请输入上传间隔' }
        ]
      },
      isDisabled: true,
      updateTahDetail: { // 修改温度湿度
      },
      updateTahRules: {
        collectionInterval: [
          { required: true, trigger: 'blur', message: '请输入间隔单位' }
        ],
        enableHumLowerAlarm: [
          { required: true, trigger: 'change', message: '请选择湿度下限告警' }
        ],
        enableHumUpperAlarm: [
          { required: true, trigger: 'change', message: '请选择湿度上限告警' }
        ],
        enableQuantityAlarm: [
          { required: true, trigger: 'change', message: '请选择电量不足告警' }
        ],
        enableTmpLowerAlarm: [
          { required: true, trigger: 'change', message: '请选择温度下限告警' }
        ],
        enableTmpUpperAlarm: [
          { required: true, trigger: 'change', message: '请选择温度上限告警' }
        ],
        humLowerLimit: [
          { required: true, trigger: 'blur', message: '请输入湿警下限' }
        ],
        humUpperLimit: [
          { required: true, trigger: 'blur', message: '请输入湿警上限' }
        ],
        id: [
          { required: true, trigger: 'blur', message: '请输入设备id' }
        ],
        nickName: [
          { required: true, trigger: 'blur', message: '请输入设备名称' }
        ],
        overCollectionInterval: [
          { required: true, trigger: 'blur', message: '请输入超温采集间隔' }
        ],
        overUploadInterval: [
          { required: true, trigger: 'blur', message: '请输入超温上报间隔' }
        ],
        quantityLimit: [
          { required: true, trigger: 'blur', message: '请输入电量告警阈值' }
        ],
        ranchId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        penId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        styId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ],
        tmpLowerLimit: [
          { required: true, trigger: 'blur', message: '请输入报警下限温度' }
        ],
        tmpUpperLimit: [
          { required: true, trigger: 'blur', message: '请输入报警上限温度' }
        ],
        uploadInterval: [
          { required: true, trigger: 'blur', message: '请输入上传间隔' }
        ]
      },
      getTahListForView: [], // 牧场列表
      // 分页
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      // 查询
      FindFromForTah: {
        kw: '',
        ranchIdArr: [],
        ranchId: '',
        penIdArr: [],
        penId: '',
        styIdArr: [],
        styId: ''
      },
      // checked: false,
      dialogVisible: false,
      userRemarkGet: '',
      userList: JSON.parse(sessionStorage.getItem('routerList')),
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultCheckRole: [],
      setRoleIdArrFir: [],
      setRoleIdArrSen: [],
      addTahListData: false
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getTahList()
    this.getRanchList()
  },
  // 方法集合
  methods: {
    handleCheckAllChange (val) {
      if (this.checkList.length < 21) {
        const arr = []
        for (const item of this.isShowList) {
          arr.push(item.label)
        }
        this.checkList = arr
        this.checkAll = true
      } else {
        this.checkList = []
      }
    },
    handleCheckedCitiesChange (val) {
      console.log()
    },
    // 获取牧场列表 - 新增 / 查询
    getRanchList () {
      ranchRanchList().then(res => {
        if (res.code === '200') {
          this.formForAddTah.ranchIdArr = res.data
          this.FindFromForTah.ranchIdArr = res.data
          this.updateTahDetail.ranchIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            type: 'info',
            message: res.message
          })
        }
      })
    },
    /**
    * changeRanchGetPen
    * changePenGetSty
    * for query
    */
    changeRanchGetPen (val) {
      this.FindFromForTah.penId = ''
      this.FindFromForTah.styId = ''
      penPenList(val).then(res => {
        console.log(res)
        if (res.code === '200') {
          this.FindFromForTah.penIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    changePenGetSty (val) {
      this.FindFromForTah.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.FindFromForTah.styIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    /**
    * changeRanchForAdd
    * changePenForAdd
    * for add
    */
    changeRanchForAdd (val) {
      this.formForAddTah.penId = ''
      this.formForAddTah.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.formForAddTah.penIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    changePenForAdd (val) {
      this.formForAddTah.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.formForAddTah.styIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    /**
    * getPenArrForDetail
    * getStyArrForDetail
    * for detail
    */
    getPenArrForDetail (val) {
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.updateTahDetail.penIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    getStyArrForDetail (val) {
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.updateTahDetail.styIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    /**
    * changeDetailRanchBePen
    * changeDetailPenBeSty
    * for detail
    */
    changeDetailRanchBePen (val) {
      this.updateTahDetail.penId = ''
      this.updateTahDetail.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.updateTahDetail.penIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    changeDetailPenBeSty (val) {
      this.updateTahDetail.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.updateTahDetail.styIdArr = res.data
          this.$forceUpdate()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 新增保存
    commitTah () {
      this.$refs.formName.validate((valid) => {
        if (valid) {
          const tahObj = {
            collectionInterval: parseInt(this.formForAddTah.collectionInterval),
            enableHumLowerAlarm: this.formForAddTah.enableHumLowerAlarmVal,
            enableHumUpperAlarm: this.formForAddTah.enableHumUpperAlarmVal,
            enableQuantityAlarm: this.formForAddTah.enableQuantityAlarmVal,
            enableTmpLowerAlarm: this.formForAddTah.enableTmpLowerAlarmVal,
            enableTmpUpperAlarm: this.formForAddTah.enableTmpUpperAlarmVal,
            humLowerLimit: parseInt(this.formForAddTah.humLowerLimit),
            humUpperLimit: parseInt(this.formForAddTah.humUpperLimit),
            id: parseInt(this.formForAddTah.id),
            nickName: this.formForAddTah.nickName,
            overCollectionInterval: parseInt(this.formForAddTah.overCollectionInterval),
            overUploadInterval: parseInt(this.formForAddTah.overUploadInterval),
            penId: parseInt(this.formForAddTah.penId),
            quantityLimit: parseInt(this.formForAddTah.quantityLimit),
            ranchId: parseInt(this.formForAddTah.ranchId),
            styId: parseInt(this.formForAddTah.styId),
            tmpLowerLimit: parseInt(this.formForAddTah.tmpLowerLimit),
            tmpUpperLimit: parseInt(this.formForAddTah.tmpUpperLimit),
            uploadInterval: parseInt(this.formForAddTah.uploadInterval)
          }
          tahDeviceAdd(tahObj).then(res => {
            this.addTahListData = false
            if (res.code === '200') {
              this.getTahList()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 获取温度湿度列表
    getTahList () {
      tahDeviceList({
        kw: this.FindFromForTah.kw,
        ranchId: this.FindFromForTah.ranchId,
        penId: this.FindFromForTah.penId,
        styId: this.FindFromForTah.styId,
        limit: this.pagination.pageSize,
        page: this.pagination.page
      }).then(res => {
        if (res.code === '200') {
          this.getTahListForView = res.data.records
          if (res.data.total > 0 && Math.ceil(res.data.total / this.pagination.size) < this.pagination.page) {
            this.pagination.page = Math.ceil(res.data.total / this.pagination.size)
            this.getTahList()
          } else {
            this.pagination.total = res.data.total
          }
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 打开新增弹框
    addEatTagNow () {
      this.getRanchList()
      this.addTahListData = true
    },
    // 查询
    submitSrearch () {
      this.getTahList()
    },
    // 重置
    resetForm () {
      this.FindFromForTah = {
        kw: '',
        ranchId: '',
        penId: '',
        styId: ''
      }
    },
    // 删除用户
    deletLiveStockDUser (val) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        tahDeviceDelete(val).then(res => {
          if (res.code === '200') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getTahList()
          } else {
            this.$message({
              type: 'info',
              message: res.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 用户详情
    getLiveStockDetail (val) {
      styDetail(val).then(res => {
        if (res.code === '200') {
          this.dialogVisible = true
          this.updateTahDetail = res.data
          this.updateTahDetail.enableHumLowerAlarmArr = [
            {
              name: '是',
              value: 1
            }, {
              name: '否',
              value: 0
            }
          ]
          this.updateTahDetail.enableHumUpperAlarmArr = [
            {
              name: '是',
              value: 1
            }, {
              name: '否',
              value: 0
            }
          ]
          this.updateTahDetail.enableQuantityAlarmArr = [
            {
              name: '是',
              value: 1
            }, {
              name: '否',
              value: 0
            }
          ]
          this.updateTahDetail.enableTmpLowerAlarmArr = [
            {
              name: '是',
              value: 1
            }, {
              name: '否',
              value: 0
            }
          ]
          this.updateTahDetail.enableTmpUpperAlarmArr = [
            {
              name: '是',
              value: 1
            }, {
              name: '否',
              value: 0
            }
          ]
          this.getRanchList()
          this.getPenArrForDetail(res.data.ranchId)
          this.getStyArrForDetail(res.data.penId)
        } else {
          this.$message({
            type: 'info',
            message: res.message
          })
        }
      })
    },
    // 修改用户详情
    setConfigUserRole () {
      this.$confirm('是否确认修改温度湿度', '提示', {
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        this.isDisabled = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    },
    // 保存修改后用户信息
    submitConfigUser () {
      console.log(this.updateTahDetail)
      this.$refs.deatilsFrom.validate((valid) => {
        if (valid) {
          const tahConfig = {
            collectionInterval: this.updateTahDetail.collectionInterval,
            enableHumLowerAlarm: this.updateTahDetail.enableHumLowerAlarm,
            enableHumUpperAlarm: this.updateTahDetail.enableHumUpperAlarm,
            enableQuantityAlarm: this.updateTahDetail.enableQuantityAlarm,
            enableTmpLowerAlarm: this.updateTahDetail.enableTmpLowerAlarm,
            enableTmpUpperAlarm: this.updateTahDetail.enableTmpUpperAlarm,
            humLowerLimit: this.updateTahDetail.humLowerLimit,
            humUpperLimit: this.updateTahDetail.humUpperLimit,
            id: this.updateTahDetail.id,
            nickName: this.updateTahDetail.nickName,
            overCollectionInterval: this.updateTahDetail.overCollectionInterval,
            overUploadInterval: this.updateTahDetail.overUploadInterval,
            penId: this.updateTahDetail.penId,
            quantityLimit: this.updateTahDetail.quantityLimit,
            ranchId: this.updateTahDetail.ranchId,
            styId: this.updateTahDetail.styId,
            tmpLowerLimit: this.updateTahDetail.tmpLowerLimit,
            tmpUpperLimit: this.updateTahDetail.tmpUpperLimit,
            uploadInterval: this.updateTahDetail.uploadInterval
          }
          console.log(tahConfig)
          tahDeviceUpdate(tahConfig).then(res => {
            if (res.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.isDisabled = true
              this.getTahList()
            } else {
              this.$message({
                type: 'info',
                message: res.message
              })
            }
          })
        }
      })
    },
    // 关闭新增弹框
    closeDia () {
      this.formForAddTah = {
        collectionInterval: '',
        enableHumLowerAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableHumLowerAlarmVal: '',
        enableHumUpperAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableHumUpperAlarmVal: '',
        enableQuantityAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableQuantityAlarmVal: '',
        enableTmpLowerAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableTmpLowerAlarmVal: '',
        enableTmpUpperAlarmArr: [
          {
            name: '是',
            value: 1
          }, {
            name: '否',
            value: 0
          }
        ],
        enableTmpUpperAlarmVal: '',
        humLowerLimit: '', // 湿警下限温度
        humUpperLimit: '',
        id: '',
        nickName: '',
        overCollectionInterval: '',
        overUploadInterval: '',
        quantityLimit: '',
        ranchId: '',
        ranchIdArr: [],
        penId: '',
        penIdArr: [],
        styId: '',
        styIdArr: [],
        tmpLowerLimit: '',
        tmpUpperLimit: '',
        uploadInterval: ''
      }
    },
    // 关闭详情弹框
    closeDiaDetail () {
      this.dialogVisible = false
      this.isDisabled = true
    }
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.authority {
  width: 100%;
  height: 100%;
}
.fir {
  width: auto;
  height: 30px;
  line-height: 30px;
  span {
    margin-left: 10px;
    padding: 5px;
    width: 30%;
  }
}
.sen {
  margin: 5px auto;
  width: 80%;
  padding: 10px;
  border: 1px solid #f0f0f0;
}
.buttons {
  width: 100%;
  text-align: center;
}
</style>
